<template>
  <div class="main">
    <div class="left">
      <div class="title">保养情况</div>
      <div class="left-name">
        <i>机种名</i>
        <span>xx设备</span>
      </div>
      <div class="left-content">
        <vue3-seamless-scroll
          v-if="leftList.length > 0"
          :list="leftList"
          :step="0.5"
          :hover="true"
          :wheel="true"
        >
          <template v-slot="{ data }">
            <div class="left-info">
              <div class="left-info-name">
                <i>{{ data.name }}</i>
                <span>{{ data.time }}</span>
              </div>
              <span class="left-info-text">{{ data.text }}</span>
            </div>
          </template>
        </vue3-seamless-scroll>
      </div>
    </div>
    <div class="chart">
      <div class="title">今日生产统计</div>
      <div id="chart" ref="chartRef"></div>
    </div>
    <div class="right">
      <div class="title">易损件使用情况</div>
      <div class="right-content">
        <vue3-seamless-scroll
          v-if="rightList.length > 0"
          :list="rightList"
          :step="0.5"
          :hover="true"
          :wheel="true"
        >
          <template v-slot="{ data }">
            <div class="right-info">
              <span class="right-info-text">{{ data.name }}</span>
              <div class="right-info-name">
                <i>使用量：{{ data.usage }}</i>
                <span>剩余量：{{ data.surplus }}</span>
              </div>
            </div>
          </template>
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script setup >
import { ref, onMounted } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { getResize } from "@/utils";
import * as echarts from "echarts";

const chartRef = ref();

// 左侧数据
const leftList = ref([]);
const onLeftData = () => {
  // 接口
  for (let i = 0; i < 10; i++) {
    leftList.value.push({
      id: i,
      name: `xx设备检验保养${i}`,
      time: "2024-11-20 11:11",
      text: "丝杠、滑轨清理，滑块注油",
    });
  }
};

// 折线图
const isPoint = ref(true); // 分隔点显隐
const onChart = () => {
  const myChart = echarts.init(chartRef.value);
  const time = [
    "08:00",
    "09:00",
    "10:00",
    "11:00",
    "12:00",
    "13:00",
    "14:00",
    "15:00",
    "16:00",
    "17:00",
  ];
  const data = [
    {
      name: "实际产量",
      data: [50, 80, 100, 120, 150, 180, 200, 230, 260, 300],
    },
    {
      name: "计划产量",
      data: [110, 220, 200, 180, 170, 330, 260, 160, 210, 100],
    },
  ];

  const option = {
    color: ["#21c71d", "#00aeff"],
    tooltip: {
      trigger: "axis",
      borderWidth: 0,
      backgroundColor: "rgba(1, 65, 122,0.5)",
      textStyle: {
        // 添加 textStyle 属性
        color: "#fff", // 设置字体颜色
      },
    },
    legend: {
      // icon: "stack",
      // itemWidth: 10,
      // itemHeight: 5,
      align: "left",
      right: "5%",
      top: "10",
      type: "plain",
      textStyle: {
        fontSize: 12,
        color: "#FFFFFF", // 设置字体颜色
        padding: [10, 10], // 设置文字与图例的距离
      },
      itemStyle: {
        borderWidth: 0,
      },
      itemGap: 20, // 设置图例项之间的间距
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "10%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true, //两侧留白
      axisLine: {
        lineStyle: {
          color: "rgba(2, 119, 175)",
          width: 2,
          type: "solid",
        },
        show: true,
        onZero: false, // 将 x 轴坐标轴置于最低刻度上
      },
      axisPointer: {
        type: "line",
        lineStyle: {
          color: {
            type: "line",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(38, 159, 193,.5)", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(38, 159, 193,.5)", // 0% 处的颜色  #000613','#00334f', '#77f0ff'
              },
            ],
          },
          type: "solid",
          width: 24,
        },
      },
      axisLabel: {
        interval: 1,
        color: "rgba(255,255,255)", //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
        margin: 20,
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        lineStyle: {
          color: "rgba(2, 119, 175)", // 刻度线颜色
          width: 2, // 刻度线宽度
        },
        length: 6, // 刻度线的长度
      },
      data: time,
    },
    yAxis: [
      {
        name: "单位：份",
        type: "value",
        min: "dataMin",
        splitLine: {
          interval: 0,
          //   show: true, // 开启分割线
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            width: 1,
            // type: [6, 3],
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#FFFFFF",
          },
        },
        axisLabel: {
          color: "#FFFFFF",
        },
        position: "left",
      },
    ],
    series: [
      {
        name: "实际产量",
        type: "line",
        // smooth: true, // 线条平滑
        // symbol: "circle", // 中心点颜色
        showSymbol: isPoint.value, // 是否显示分隔点
        symbolSize: 10,
        itemStyle: {
          normal: {
            // color: '#00AEFF'
            // shadowColor: "rgba(0, 174, 255,1)",
            shadowColor: "#FFF",
            shadowBlur: 1,
            lineStyle: {
              width: 2,
            },
          },
        },
        data: data[0].data,
      },
      {
        name: "计划产量",
        type: "line",
        // smooth: true, // 线条平滑
        // symbol: "circle", // 中心点颜色
        showSymbol: isPoint.value, // 是否显示分隔点
        symbolSize: 10,
        itemStyle: {
          //折线拐点标志的样式
          normal: {
            // color: '#00AEFF'
            // shadowColor: "rgba(0, 174, 255,1)",
            shadowColor: "#FFF",
            shadowBlur: 1,
            lineStyle: {
              width: 2,
              type: "dashed", //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            },
            // 折线图背景
            areaStyle: {
              //color: '#00AEFF'
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 174, 255,.7)",
                },
                {
                  offset: 1,
                  color: "rgba(3,240,254,0)",
                },
              ]),
            },
          },
        },
        // 可以加快图标响应速度
        // animation: true, // 开启动画
        // animationDuration: 500, // 动画时长
        // animationEasing: "easeInOutCubic", // 动画效果,
        data: data[1].data,
      },
    ],
  };
  getResize(option, myChart);

  // 设置光圈闪烁效果
  let isVisible = true;
  let shadowBlur = 1;
  let shadowColor = "#FFF";
  let min = 1;
  let max = 15;
  const series = myChart.getOption().series;
  setInterval(() => {
    // 更新图表数据
    myChart.setOption({
      series: series.map((item) => ({
        ...item,
        itemStyle: {
          normal: {
            shadowBlur,
            shadowColor,
          },
        },
      })),
    });

    if (isVisible) {
      shadowBlur++;
    } else {
      shadowBlur--;
    }
    if (shadowBlur == min) {
      isVisible = true;
    }
    if (shadowBlur == max) {
      isVisible = false;
    }
  }, 100);
};

// 右侧数据
const rightList = ref([]);
const onRightData = () => {
  // 接口
  for (let i = 0; i < 10; i++) {
    rightList.value.push({
      id: i,
      name: `${i}机壳定位菱形销`,
      usage: 20 + i,
      surplus: 30 + i,
    });
  }
};

onMounted(() => {
  onLeftData();
  onChart();
  onRightData();
});
</script>

<style lang="scss" scoped>
$height: 356px;
#chart {
  width: 100%;
  height: 100%;
}

.main {
  display: flex;
  margin-top: 30px;
  .left,
  .right,
  .chart {
    flex: 1;
    // overflow: hidden;
    // height: 385px;
    // background: #ccc;
    .title {
      display: flex;
      align-items: center;
      height: 36px;
      background: linear-gradient(90deg, #095472 0%, rgba(2, 17, 21, 0) 100%);
      &::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 15px;
        background: #00ffea;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }
  .left {
    .left-name {
      display: flex;
      align-items: center;
      > i {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        opacity: 0.6;
        margin: 0 23px 0 13px;
      }
      > span {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
      }
    }
    .left-content {
      overflow: hidden;
      height: 330px;
      padding: 10px 13px;
      background: linear-gradient(90deg, #095472 0%, rgba(250, 250, 250, 0));
      .left-info {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%);
          display: inline-block;
          width: 420px;
          height: 1px;
          background: #ffffff;
          opacity: 0.2;
        }
        .left-info-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          > i {
            // font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 16px;
            color: #41b9f1;
          }
          > span {
            // font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 12px;
            color: #ababab;
          }
        }
        .left-info-text {
          //   font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          opacity: 0.7;
          margin-top: 10px;
        }
      }
      // background: #ccc;
    }
  }
  .chart {
    flex: 2;
    margin: 0 40px;
    .chart-content {
      overflow: hidden;
      height: $height;
      background: #ccc;
    }
  }
  .right {
    .right-name {
      display: flex;
      align-items: center;
      > i {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        opacity: 0.6;
        margin: 0 23px 0 13px;
      }
      > span {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
      }
    }
    .right-content {
      overflow: hidden;
      height: $height;
      padding: 10px;

      .right-info {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        background: linear-gradient(90deg, #2b6271 0%, rgba(250, 250, 250, 0));
        margin: 0 0 20px 0;
        &::before {
          content: "";
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translate(-50%);
          display: inline-block;
          width: 420px;
          height: 1px;
          background: #ffffff;
          opacity: 0.2;
        }
        .right-info-name {
          display: flex;
          align-items: center;
          //   justify-content: space-between;
          margin-top: 10px;
          > i {
            // font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 13px;
            color: #ffffff;
            opacity: 0.7;
          }
          > span {
            // font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 13px;
            color: #ffffff;
            opacity: 0.7;
            margin-left: 40px;
          }
        }
        .right-info-text {
          //   font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #41b9f1;
        }
      }
      // background: #21c71d;
    }
  }
}
</style>